<template>
  <div class="live-broadcast">
    <nav-header>
      <template slot="menuBefore">
        <li>
          <router-link to="/resources/live/livePlay-list">直播列表</router-link>
        </li>
        <li class="gap">&gt;</li>
      </template>
    </nav-header>
    <div class="publishFrom">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item
          label-width="100px"
          label="预约类型"
          :rules="[{ required: true }]"
        >
          <el-radio-group v-model="ruleForm.type">
            <el-radio :label="0">预约直播时间</el-radio>
            <el-radio :label="1">立刻开始直播</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="parseInt(ruleForm.type) === 1"
          prop="end_time"
          label="结束时间"
        >
          <el-col :span="11">
            <el-time-select
              placeholder="结束时间"
              v-model="ruleForm.end_time"
              :editable="true"
              :picker-options="{
                start: '00:00',
                step: '00:05',
                end: '23:55',
                minTime: ruleForm.start_time,
              }"
            >
            </el-time-select>
          </el-col>
        </el-form-item>
        <div class="make_time" v-if="parseInt(ruleForm.type) === 0">
          <el-form-item label="直播时间" label-width="100px" prop="liveTime">
            <el-select
              @change="liveDayTime"
              v-model="ruleForm.liveTime"
              filterable
              placeholder="请选择"
            >
              <el-option label="自定义时间" :value="1"></el-option>
              <el-option
                v-show="!$store.state.platformInformation"
                label="节次"
                :value="2"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label-width="0" prop="date1">
            <el-date-picker
              v-model="ruleForm.date_time"
              @change="dateChange"
              type="date"
              value-format="yyyy-MM-dd"
              :editable="true"
              :picker-options="pickerOptions"
              placeholder="直播时间"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label-width="0" prop="Livesection" v-if="dayTime">
            <el-select
              @change="timeSectionChange"
              v-model="ruleForm.Livesection"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in nodeTime"
                :label="`第${item.section}节  ${item.start_time} - ${item.end_time}`"
                :value="index"
                :key="index"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!--  -->
          <el-form-item label-width="0" class="Livesection" v-else>
            <el-col :span="11">
              <el-form-item prop="start_time" style="margin-bottom: 0">
                <el-time-select
                  placeholder="起始时间"
                  v-model="ruleForm.start_time"
                  :editable="true"
                  :picker-options="{
                    start: '00:00',
                    step: '00:05',
                    end: '23:55',
                    minTime: init_start_time,
                    maxTime: ruleForm.end_time,
                  }"
                >
                </el-time-select>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-form-item prop="end_time" style="margin-bottom: 0">
                <el-time-select
                  placeholder="结束时间"
                  v-model="ruleForm.end_time"
                  :editable="true"
                  :picker-options="{
                    start: '00:00',
                    step: '00:05',
                    end: '23:55',
                    minTime: ruleForm.start_time,
                  }"
                >
                </el-time-select>
              </el-form-item>
            </el-col>
          </el-form-item>
        </div>
        <el-form-item label="直播名称" prop="name">
          <el-input
            v-model="ruleForm.name"
            maxlength="20"
            placeholder="20个字以内"
          ></el-input>
        </el-form-item>
        <ul>
          <li class="publishFrom_seleck">
            <el-form-item label="直播设备" prop="recorder_id">
              <el-select
                v-model="ruleForm.recorder_id"
                filterable
                placeholder="选择设备"
                @change="getCurrentRecorderType()"
              >
                <el-option
                  v-for="(item, index) in recorderData"
                  :label="item.name"
                  :value="item.id"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="主讲人" prop="create_id">
              <el-select
                v-model="ruleForm.create_id"
                filterable
                placeholder="输入选择主讲人"
              >
                <el-option
                  v-for="(item, index) in Teacher"
                  :label="item.name"
                  :value="item.id"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </li>
          <!-- 学校有学段/年级/科目/通知班级 -->
          <li
            v-if="!$store.state.platformInformation"
            class="publishFrom_seleck"
          >
            <el-form-item label="学段">
              <el-select
                v-model="ruleForm.study_section_id"
                @change="getOrgLevel2"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in orgLevel2"
                  :label="item.name"
                  :value="item.id"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="年级">
              <el-select
                v-model="ruleForm.grade_id"
                @change="getOrgLevel3"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in orgLevel3"
                  :label="item.name"
                  :value="item.id"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </li>
          <li
            v-if="!$store.state.platformInformation"
            class="publishFrom_seleck"
          >
            <el-form-item label="科目">
              <el-select
                v-model="ruleForm.subject_id"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in orgSubject"
                  :label="item.name"
                  :value="item.id"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </li>
          <!-- <li class="publishFrom_seleck">
						<el-form-item label="评课标准">
							<el-select v-model="ruleForm.create_id" filterable placeholder="暂不选择">
								<el-option v-for="(item, index) in Teacher" :label="item.name" :value="item.id" :key="index"></el-option>
							</el-select>
						</el-form-item>
							<el-button style="margin-left: -360px" type="text" @click="broadcast()">新增评课标准</el-button>
						<el-form-item >

						</el-form-item>
					</li> -->
          <li
            v-if="!$store.state.platformInformation"
            class="publishFrom_seleck"
          >
            <el-form-item label="通知班级">
              <el-checkbox-group v-model="ruleForm.class_id">
                <el-checkbox
                  v-for="(item, index) in noticeClass"
                  :label="item.id"
                  :value="item.id"
                  name="type"
                  :key="index"
                  >{{ item.rename }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
          </li>
        </ul>
        <el-form-item label="是否录制" prop="is_record">
          <el-radio-group
            v-model="ruleForm.is_record"
            :disabled="currentRecorderType === 4"
          >
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="直播密码">
          <el-radio-group v-model="is_encrypt" @change="changeEncrypt">
            <el-radio :label="1">开启</el-radio>
            <el-radio :label="0">关闭</el-radio>
          </el-radio-group>
          <span style="font-size: 14px; color: #666; margin-left: 45px"
            >（开启密码后，前台用户需要输入正确的直播密码才能观看直播）</span
          >
        </el-form-item>
        <div class="setting-password" v-if="is_encrypt == 1">
          <el-form-item label="" prop="setPassword">
            <el-input
              :type="!is_open ? 'password' : 'text'"
              v-model="ruleForm.setPassword"
              placeholder="设置直播观看密码"
              maxlength="6"
            >
              <i slot="suffix" @click="is_open = !is_open">
                <img
                  v-if="!is_open"
                  src="./../../../../static/image/affairs/closeeye.png"
                />
                <img
                  v-else
                  src="./../../../../static/image/affairs/openeye.png"
                />
              </i>
            </el-input>
          </el-form-item>
          <el-form-item label="" prop="verifyPassword">
            <el-input
              type="password"
              v-model="verifyPassword"
              placeholder="确认直播观看密码"
              maxlength="6"
            ></el-input>
          </el-form-item>
        </div>
        <el-form-item label="封面图片" prop="imageUrl2">
          <div class="publishFrom_ box uploader-img">
            <img v-if="selectFileOrNot" :src="previewImgURL" class="avatar" />
            <div class="publishFrom_b" v-else>
              <i class="el-icon-upload"></i>
              <span style="font-size: 12px">（支持 bmp/jpg/jpeg/png）</span>
            </div>
            <uploader
              :options="uploadOptions"
              :autoStart="false"
              ref="uploader"
              :file-status-text="statusText"
              @file-added="fileAddImg"
              @file-removed="fileRemoved"
              @file-success="fileSuccess"
              @file-error="fileFail"
              class="uploader-example"
            >
              <uploader-unsupport></uploader-unsupport>
              <uploader-btn
                :directory="false"
                :attrs="attrs"
                v-if="selectFileShow"
                :single="true"
              ></uploader-btn>
              <div class="uploader-close-box" v-show="previewImgURL">
                <label
                  class="el-upload-list__item-status-label"
                  @click="fileRemoved"
                >
                  <transition name="el-fade-in-linear">
                    <i class="el-icon-upload-success el-icon-check"></i>
                  </transition>
                  <transition name="el-fade-in-linear">
                    <i class="el-icon-close"></i>
                  </transition>
                </label>
              </div>
            </uploader>
          </div>
        </el-form-item>
        <el-form-item label="直播简介" prop="synopsis">
          <el-input
            type="textarea"
            :rows="5"
            resize="none"
            :maxLength="200"
            v-model="ruleForm.synopsis"
            placeholder="在此输入简介"
          ></el-input>
          <span class="numberWord"
            ><i>{{ ruleForm.synopsis.length }}</i
            >/200</span
          >
        </el-form-item>
        <div class="is_ai clear" v-if="showAi && ruleForm.is_record === 1">
          <el-form-item label="AI教学分析" prop="is_ai">
            <el-radio-group v-model="ruleForm.is_ai">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="上课班级"
            prop="ai_class_id"
            v-if="ruleForm.is_ai == 1"
            style="width: 300px"
          >
            <el-select
              filterable
              v-model="ruleForm.ai_class_id"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in noticeClass"
                :label="item.name"
                :value="item.id"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <!-- <template v-if="!$store.state.platformInformation">
					<el-form-item label="观看权限" class="jurisdiction">
						<el-radio-group v-model="ruleForm.jurisdiction" @change="changeJurisdiction">
							<el-radio label="0">不限制</el-radio>
							<el-radio label="1">按角色限制</el-radio>
							<el-radio label="2">按年级限制</el-radio>
							<el-radio label="3">按班级限制</el-radio>
						</el-radio-group>
					</el-form-item>
					<template v-if="ruleForm.jurisdiction == 1">
						<el-form-item label-width="100px" prop="roleArray" class="roleArray">
							<el-scrollbar>
								<el-checkbox-group v-model="ruleForm.roleArray">
									<template v-for="item of allRoleList">
										<el-checkbox :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
									</template>
								</el-checkbox-group>
							</el-scrollbar>
						</el-form-item>
					</template>
					<template v-if="ruleForm.jurisdiction == 2">
						<el-form-item label-width="100px" prop="gradeArray" class="gradeArray">
							<el-scrollbar>
								<el-checkbox-group v-model="ruleForm.gradeArray">
									<template v-for="item of allGradeList">
										<el-checkbox :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
									</template>
								</el-checkbox-group>
							</el-scrollbar>
						</el-form-item>
					</template>
					<template v-if="ruleForm.jurisdiction == 3">
						<el-form-item label-width="100px" prop="calssArray" class="calssArray">
							<div class="calssArray-wp">
								<el-tree class="allClass" :data="allClassList" id='tree' show-checkbox ref="tree" node-key="id" default-expand-all highlight-current :props="defaultProps" @check="handleCheckChange">
								</el-tree>
								<div class="calssArray-r">
									<h3>限制观看班级</h3>
									<el-scrollbar>
										<ul>
											<li v-for="(item, index) of classCheck" :key="index">
												<h3>{{item.name}}</h3>
												<div>
													<template v-for="(tag, index2) of item.children">
														<span :key="index2" @click="deldeteCalss(tag.id)">{{tag.name}} <i class="el-icon-close"></i></span>
													</template>
												</div>
											</li>
										</ul>
									</el-scrollbar>
								</div>
							</div>
						</el-form-item>
					</template>
				</template> -->
        <el-form-item>
          <el-button @click="cancel()">取消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-dialog
      title="图片设置"
      :visible.sync="cropperViews"
      width="1000px"
      custom-class="croppering"
      :before-close="clearFilet"
      :close-on-click-modal="false"
    >
      <div class="croppering">
        <div class="cropper">
          <vueCropper
            ref="cropper"
            :img="imgOption.img"
            :outputSize="imgOption.size"
            :outputType="imgOption.outputType"
            :info="true"
            :full="imgOption.full"
            :canMove="imgOption.canMove"
            :canMoveBox="imgOption.canMoveBox"
            :fixedBox="imgOption.fixedBox"
            :original="imgOption.original"
            :autoCrop="imgOption.autoCrop"
            :autoCropWidth="imgOption.autoCropWidth"
            :autoCropHeight="imgOption.autoCropHeight"
            :centerBox="imgOption.centerBox"
            :high="imgOption.high"
            :infoTrue="imgOption.infoTrue"
            :enlarge="imgOption.enlarge"
          >
          </vueCropper>
        </div>
        <div slot="footer" class="dialog-footer cropper_btn">
          <el-button @click="clearFilet()">取消</el-button>
          <el-button type="primary" @click="finish('base64')">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { VueCropper } from "vue-cropper";
import {
  dataURLtoFile,
  uploaderFileFail,
  longTimeMessage,
} from "./../../../tools/tool";

export default {
  name: "",
  components: {
    VueCropper,
  },
  data() {
    return {
      app_code: sessionStorage.getItem("CheckSchoolAppCode"),
      init_start_time: "", // 开始时间的可选范围
      showAi: false, // 是否显示 Ai
      is_open: false,
      cropperViews: false, // 是否显示图片裁剪的模态框
      imgOption: {
        // vue-cropper 参数配置
        img: "", // 裁剪图片的地址
        size: 1, // 裁剪生成图片的质量
        full: false, // 是否输出原图比例的截图
        outputType: "png", //输出图片格式
        canMove: true, //能否拖动图片
        fixedBox: true, //截图框固定大小
        original: false, //否显示原始宽高
        canMoveBox: true, //能否拖动截图框
        autoCrop: true, //autoCrop 是否自动生成截图框
        // 只有自动截图开启 宽度高度才生效
        autoCropWidth: 290,
        autoCropHeight: 160,
        centerBox: false, //截图框是否限制在图片里
        high: true, //是否根据dpr生成适合屏幕的高清图片
      },
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      is_encrypt: 0,
      verifyPassword: "",
      ruleForm: {
        name: "", //视频名称
        recorder_id: "", //直播设备
        study_section_id: "", //学段
        grade_id: "", //年级
        subject_id: "", //科目
        synopsis: "", //视频简介
        imageUrl2: "",
        class_id: [], //通知班级
        date_time: timestampToTime().substr(0, 10), //日历
        liveTime: 1, //直播时间
        Livesection: "",
        start_time: "", //开始时间
        end_time: "", //结束时间
        is_record: 0,
        type: 0,
        is_ai: 0,
        ai_class_id: "",
        setPassword: null,
        jurisdiction: "0",
        gradeArray: [],
        roleArray: [],
        calssArray: [],
      },
      rules: {
        name: [
          { required: true, message: "请输入直播名称", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: "blur",
          },
          { validator: this.valverName, trigger: "blur" },
        ],
        recorder_id: [
          { required: true, message: "请选择直播设备", trigger: "change" },
        ],
        create_id: [
          { required: true, message: "请选择主讲人", trigger: "change" },
        ],
        study_section_id: [
          { required: true, message: "请选择学段", trigger: "change" },
        ],
        grade_id: [
          { required: true, message: "请选择年级", trigger: "change" },
        ],
        subject_id: [
          { required: true, message: "请选择科目	", trigger: "change" },
        ],
        synopsis: [
          // { required: true, message: '请填写活动形式', trigger: 'blur' },
          {
            min: 0,
            max: 200,
            message: "长度在 0 到 200 个字符",
            trigger: "change",
          },
        ],
        start_time: [
          { required: true, message: "请选择开始时间	", trigger: "change" },
        ],
        end_time: [
          { required: true, message: "请选择结束时间	", trigger: "change" },
        ],
        date_time: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        liveTime: [
          { required: true, message: "请选择时间	", trigger: "change" },
        ],
        Livesection: [
          { required: true, message: "请选择时间	", trigger: "change" },
        ],
        ai_class_id: [
          { required: true, message: "上课班级	", trigger: "change" },
        ],
        setPassword: [
          { pattern: /^\d{6}$/, message: "请输入6位数字密码", trigger: "blur" },
          { validator: this.valiSetPass, trigger: "blur" },
        ],
        verifyPassword: [
          { pattern: /^\d{6}$/, message: "请输入6位数字密码", trigger: "blur" },
          { validator: this.valiVerifyPass, trigger: "blur" },
        ],
        gradeArray: [
          { required: true, message: "请选择年级	", trigger: "change" },
        ],
        calssArray: [
          { required: true, message: "请选择班级	", trigger: "change" },
        ],
        roleArray: [
          { required: true, message: "请选择按角色	", trigger: "change" },
        ],
      },
      dayTime: false,
      nodeTime: [],
      orgLevel2: [], //学段
      orgLevel3: [], //年级
      orgSubject: [], //科目
      noticeClass: [], //班级通知
      recorderParam: {
        status: 1,
      },
      recorderData: [],
      statusText: {
        success: "上传成功",
        error: "上传出错",
        uploading: "正在上传...",
        paused: "暂停",
        waiting: "等待上传",
      },
      selectFileOrNot: false, //是否选中文件
      uploadOrNot: false, //是否已经上传
      uploadInfo: {
        file_name: "",
        file_path: "",
        file_size: 0,
      },
      attrs: {
        accept: ["image/*"],
      },
      uploadOptions: {
        target: this.BASE_URL + "/api/resource/res_upload",
        testChunks: false,
        headers: { Authorization: `Bearer ` + this.$g.access_token },
      },
      selectFileShow: true, //是否显示选择文件按钮
      uploadRetryTimes: 100, //文件最大重传次数
      previewImgURL: "",
      Teacher: [],
      teacherParam: {
        org_id: 0,
        role_id: 6,
        status: 1,
      },
      messageObj: {},
      imageType: ["image/jpeg", "image/bmp", "image/png"], // 上传图片格式
      allGradeList: [],
      /*年级数组*/
      allRoleList: [],
      /*角色数组*/
      allClassList: [],
      /*班级数组*/
      classCheck: [],
      checkArray: [],
      defaHalf: [], // 树形结构选中的id
      idList: [], // 默认level为2、3 id
      defaultProps: {
        children: "children",
        label: "name",
      },
      currentRecorderType: null,
    };
  },
  created() {
    this.getTimeset();
    /*this.$store.state.platformInformation && */
    this.getOrgLevel2();
    this.getRecorder();
    this.getTeacher();
    this.allRole();
    this.allGrade();
    this.getAllClass();
    this.checkAi();
  },
  watch: {
    "ruleForm.type": {
      handler(b) {
        if (parseInt(b) === 1) {
          this.ruleForm.date_time = timestampToTime().substr(0, 10);
          this.ruleForm.start_time = timestampToTime().substr(11, 8);
          this.ruleForm.end_time = "";
        } else {
          this.ruleForm.date_time = timestampToTime().substr(0, 10);
          this.ruleForm.start_time = "";
          this.init_start_time = timestampToTime().substr(11, 5);
          this.ruleForm.end_time = "";
        }
      },
      immediate: true,
    },
    "ruleForm.is_record"(a, b) {
      if (a === 0) {
        this.ruleForm.is_ai = 0;
        this.ruleForm.ai_class_id = "";
      }
    },
  },
  methods: {
    // broadcast() {
    //   this.$router.push("/resources/live/live-standard");
    // },
    /**
     *  日期改变时重置时间可选范围
     */
    dateChange(data) {
      if (data == timestampToTime().substr(0, 10)) {
        this.init_start_time = timestampToTime().substr(11, 5);
      } else {
        this.init_start_time = "";
      }
    },
    /**
     * 是否显示 AI
     */
    checkAi() {
      let success = (res) => {
        this.showAi = res.data === "yes" ? true : false;
        console.log(res, 9999);
      };

      this.$ajax.get("api/app/check_ai", { func: { success: success } });
    },
    /**
     * 删除限制观看的班级
     * @param {Number} id 要删除班级的id
     */
    deldeteCalss(id) {
      let temp = [];
      this.defaHalf = this.defaHalf.filter((item) => item !== id);

      this.allClassList.forEach((item) => [
        item.children.forEach((item2) => {
          item2.children.forEach((item3) => {
            if (this.defaHalf.includes(item3.id)) {
              temp.push({
                id: item3.id,
                name: item3.name,
              });
            }
          });
        }),
      ]);

      this.$refs.tree.setCheckedNodes(temp);
      this.handleCheckChange();
    },
    /**
     * 对象、树目前的选中状态对象
     * @param    {Object}   data
     * @param    {Array}    checked 四个属性来读取选中的id,对象结构
     */
    handleCheckChange(data, checked) {
      console.log(data, checked, 5678);
      let _half = this.$refs.tree
        .getCheckedKeys()
        .concat(this.$refs.tree.getHalfCheckedKeys());
      this.defaHalf = _half;
      console.log(this.defaHalf, "this.defaHalf");

      this.ruleForm.calssArray = _half.filter((items) => {
        if (!this.idList.includes(items)) return items;
      });

      let _temp1 = [];
      let _classCheck = [];
      this.classCheck = [];

      this.allClassList.forEach((item1) => {
        item1.children &&
          item1.children.forEach((item2) => {
            item2.children &&
              item2.children.forEach((item3) => {
                if (this.ruleForm.calssArray.includes(item3.id)) {
                  _classCheck.push({
                    id: item3.id,
                    pid: item3.pid,
                    name: item3.name,
                  });

                  if (!_temp1.includes(item3.pid)) {
                    _temp1.push(item3.pid);

                    this.classCheck.push({
                      name: this.getGradeName(item3.pid),
                      pid: item3.pid,
                      children: [],
                    });
                  }
                }
              });
          });
      });

      _classCheck.forEach((item) => {
        let inx = _temp1.indexOf(item.pid);

        this.classCheck[inx].children.push({
          id: item.id,
          name: item.name,
        });
      });
      console.log(this.classCheck, "this.classCheck");
    },
    /**
     * 获取年级名字
     */
    getGradeName(id) {
      let name = "";
      console.log(this.allClassList, "this.allClassListthis.allClassList");
      this.allClassList.forEach((item1) => {
        item1.children &&
          item1.children.forEach((item2) => {
            if (item2.id === id) {
              name = item2.name;
            }
          });
      });

      return name;
    },
    /**
     * 观看权限
     * @param {String} val 切换标识
     */
    changeJurisdiction(val) {
      this.ruleForm.gradeArray = [];
      this.ruleForm.roleArray = [];
      this.ruleForm.calssArray = [];
      this.classCheck = [];
    },
    /**
     * 获取所有班级
     * @DateTime 2019-08-05T10:49:16+0800
     * @return   {[type]}                 [description]
     */
    getAllClass() {
      let success = (res) => {
        this.allClassList = res.data[0].children;

        for (var i = 0; i < this.allClassList.length; i++) {
          !this.allClassList[i].children &&
            (this.allClassList[i].disabled = true);
          if (this.allClassList[i].children !== 0) {
            for (let j = 0; j < this.allClassList[i].children.length; j++) {
              let item = this.allClassList[i].children[j];
              item.disabled = item.children.length > 0 ? false : true;
            }
          }
        }

        // 获取 level 为 2、3 的值
        this.allClassList.forEach((item) => {
          this.idList.push(item.id);
          console.log(item.children, "item.children");
          item.children &&
            item.children.forEach((item2) => {
              this.idList.push(item2.id);
            });
        });
      };
      if (this.$store.state.checkLevel) {
        this.$ajax.get("api/network/get_organization_down", {
          params: { app_code: this.app_code },
          func: { success: success },
        });
      } else {
        this.$ajax.get("api/org/org", {
          params: { data_type: "manage_tree", status: "1,2" },
          func: { success: success },
        });
      }
    },
    /**
     * 获取所有角色
     * @DateTime 2019-08-05T10:42:45+0800
     * @return   {[type]}                 [description]
     */
    allRole() {
      let success = (res) => {
        this.allRoleList = res.data;
        console.log(res.data, 777);
      };
      if (this.$store.state.checkLevel) {
        this.$ajax.get("api/role/role", { func: { success: success } });
      } else {
        this.$ajax.get("api/role/get_small_role", {
          params: { type: 1 },
          func: { success: success },
        });
      }
    },
    /*
     * 获取所有年级
     */
    allGrade() {
      let success = (res) => {
        this.allGradeList = res.data;
      };
      if (this.$store.state.checkLevel) {
        let params = {
          app_code: this.app_code,
          level: 3,
        };
        this.$ajax.get("api/network/get_platform_org", {
          params,
          func: { success: success },
        });
      } else {
        this.$ajax({
          url: "api/org/all_grade",
          method: "get",
          params: {},
          func: { success: success },
        });
      }
    },
    changeEncrypt() {
      if (this.is_encrypt == 0) {
        this.ruleForm.setPassword = null;
      }
    },
    valiSetPass(rule, value, callback) {
      if (this.verifyPassword) {
        if (this.ruleForm.setPassword !== this.verifyPassword) {
          callback(new Error("密码不一致，请重新输入!"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    },
    valiVerifyPass(rule, value, callback) {
      if (this.ruleForm.setPassword) {
        if (this.verifyPassword !== this.ruleForm.setPassword) {
          callback(new Error("密码不一致，请重新输入!"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    },
    /**
     * 直播名称只能是中文、数字、字母
     */
    valverName(rule, value, callback) {
      let reg = /^[\w\u4e00-\u9fa5]+$/gi;

      if (!reg.test(value)) {
        callback(new Error("直播名称只能是中文、数字、字母!"));
      } else {
        callback();
      }
    },
    getTeacher() {
      let success = (data) => {
        this.Teacher = data.data;
      };
      this.$store.state.platformInformation && (this.teacherParam.role_id = 8);
      this.$ajax.get("api/user/user", {
        params: this.teacherParam,
        func: { success: success },
      });
    },
    saveLive() {
      let array = [
        ...this.ruleForm.gradeArray,
        ...this.ruleForm.roleArray,
        ...this.ruleForm.calssArray,
      ];
      var params = {
        name: this.ruleForm.name,
        study_section_id: this.ruleForm.study_section_id,
        grade_id: this.ruleForm.grade_id,
        subject_id: this.ruleForm.subject_id,
        class_id: this.ruleForm.class_id,
        recorder_id: this.ruleForm.recorder_id,
        create_id: this.ruleForm.create_id,
        start_time: this.ruleForm.date_time + " " + this.ruleForm.start_time,
        end_time: this.ruleForm.date_time + " " + this.ruleForm.end_time,
        picture: this.ruleForm.picture,
        authority: this.ruleForm.authority,
        is_mobile: this.ruleForm.is_mobile,
        is_record: this.ruleForm.is_record,
        record_status: this.ruleForm.record_status,
        profile: this.ruleForm.synopsis,
        comment: this.ruleForm.comment,
        status: this.ruleForm.status,
        is_record: this.ruleForm.is_record,
        type: this.ruleForm.type,
        is_ai: this.ruleForm.is_ai,
        ai_class_id: this.ruleForm.ai_class_id,
        password: this.ruleForm.setPassword ? this.ruleForm.setPassword : null,
        limit_type: this.ruleForm.jurisdiction,
        limit_id: array,
      };
      let success = (data) => {
        this.$message.success(data.msg);
        this.$router.push("/resources/live/livePlay-list");
      };
      let fail = (res) => {
        longTimeMessage(this, res, 15000);
      };
      this.$ajax.post("api/live/live", params, {
        func: { success: success, fail: fail },
      });
    },
    timeSectionChange(value) {
      this.ruleForm.start_time = this.nodeTime[value].start_time;
      this.ruleForm.end_time = this.nodeTime[value].end_time;
    },
    getRecorder() {
      let success = (data) => {
        this.recorderData = data.data;
      };
      this.$ajax.get("api/recorder/recorder_list", {
        params: this.recorderParam,
        func: { success: success },
      });
    },
    //直播时间--自定义时间--节次
    getTimeset() {
      let success = (res) => {
        let data = res.data;
        this.nodeTime = data;
      };
      this.$ajax({
        url: "/api/school/timeset",
        method: "get",
        params: {},
        func: {
          success: success,
        },
      });
    },
    //自定义时间
    liveDayTime() {
      if (parseInt(this.ruleForm.liveTime) === 2) {
        this.dayTime = true;
        this.ruleForm.Livesection = "";
      } else {
        this.ruleForm.startTime = "";
        this.ruleForm.endTime = "";
        this.dayTime = false;
      }
    },
    //获取学段
    getOrgLevel2() {
      let success = (res) => {
        let data = res.data;
        this.orgLevel2 = data;
        this.ruleForm.ai_class_id = "";
        this.ruleForm.class_id = [];
        this.ruleForm.grade_id = "";
        this.ruleForm.subject_id = "";
        this.orgLevel3 = [];
        this.orgSubject = [];
        this.noticeClass = [];

        this.getOrgLevel3();
      };
      let params = {
        level: 2,
        pid: 1,
        direction: "balance",
      };
      if (this.$store.state.checkLevel) {
        this.$ajax.get("api/newlevel/platform_org", {
          params: params,
          func: { success: success },
        });
      } else {
        this.$ajax.get("api/org/org", {
          params: params,
          func: { success: success },
        });
      }
    },
    //获取年级
    getOrgLevel3() {
      let success = (res) => {
        let data = res.data;
        this.orgLevel3 = data;

        this.ruleForm.subject_id = "";
        this.orgSubject = [];
        this.getSubject();

        this.ruleForm.class_id = [];
        this.noticeClass = [];
        this.getNoticeClass();
      };

      let params = {
        level: 3,
        pid: this.ruleForm.study_section_id,
        direction: "balance",
      };

      if (this.$store.state.checkLevel) {
        this.$ajax.get("api/newlevel/platform_org", {
          params: params,
          func: { success: success },
        });
      } else {
        this.$ajax.get("api/org/org", {
          params: params,
          func: { success: success },
        });
      }
    },
    //科目
    getSubject() {
      let success = (res) => {
        let data = res.data;
        this.orgSubject = data;
      };
      let params = {
        type: 2,
        org_id: this.ruleForm.grade_id,
        status: 1,
      };

      if (this.$store.state.checkLevel) {
        this.$ajax.get("api/newlevel/platform_subject", {
          params: params,
          func: { success: success },
        });
      } else {
        this.$ajax.get("api/cate/subject", {
          params: params,
          func: { success: success },
        });
      }
    },
    //通知班级
    getNoticeClass() {
      let success = (res) => {
        let data = res.data;
        this.noticeClass = data;
      };
      if (this.$store.state.checkLevel) {
        let params = {
          pid: this.ruleForm.grade_id,
          level: 4,
        };
        this.$ajax.get("api/newlevel/platform_org", {
          params,
          func: { success: success },
        });
      } else {
        let params = {
          level: 4,
          direction: "balance",
          pid: this.ruleForm.grade_id,
          status: 1,
        };
        this.$ajax.get("api/org/org", { params, func: { success: success } });
      }
    },
    //上传成功的事件
    fileSuccess(rootFile, file, message, chunk) {
      var mess = eval("(" + message + ")");
      mess = handleResponseData(mess);

      if (parseInt(mess.data.status) === 1) {
        this.uploadOrNot = true;
        this.uploadInfo.file_name = mess.data.file_name;
        this.uploadInfo.file_path = mess.data.file_path;
        this.uploadInfo.post_fix = mess.data.post_fix;
        this.ruleForm.picture = this.uploadInfo.file_path;
        // this.saveLive();
      }
    },
    fileFail(rootFile, file, message, chunk) {
      uploaderFileFail(this, this.$refs.uploader.uploader, file, message);
    },
    //清空上传控件列表的数据
    clearFilet() {
      this.cropperViews = false;
      this.$refs.uploader.uploader.fileList = [];
      this.$refs.uploader.uploader.files = [];
    },
    //图片裁剪后替换原图片
    finish(type) {
      if (type === "blob") {
        this.$refs.cropper.getCropBlob((data) => {
          if (data.size > 10240000) {
            this.$message.warning("只允许上传10M以内的文件");
            this.clearFilet();
          } else {
            this.$refs.uploader.uploader.fileList[0].file = data;
            this.$refs.uploader.uploader.files[0].file = data;
            this.$refs.uploader.uploader.fileList[0].size = data.size;
            this.$refs.uploader.uploader.files[0].size = data.size;
            this.$refs.uploader.uploader.fileList[0].uniqueIdentifier =
              data.size + "-" + this.$refs.uploader.uploader.fileList[0].name;
            this.$refs.uploader.uploader.fileList[0].chunks[0].endByte =
              data.size;

            this.uploadInfo.file_size = data.size;
            this.previewImgURL = window.URL.createObjectURL(data);
            this.ruleForm.select_or_not = "1";
            this.selectFileOrNot = true;
            this.selectFileShow = false;
            this.cropperViews = false;
          }
        });
      } else if (type === "base64") {
        this.$refs.cropper.getCropData((data) => {
          let modelView = dataURLtoFile(
            data,
            this.$refs.uploader.uploader.fileList[0].name,
            "png"
          );

          if (modelView.size > 10240000) {
            this.$message.warning("只允许上传10M以内的文件");
            this.clearFilet();
          } else {
            this.$refs.uploader.uploader.fileList[0].file = modelView;
            this.$refs.uploader.uploader.files[0].file = modelView;
            this.$refs.uploader.uploader.fileList[0].size = modelView.size;
            this.$refs.uploader.uploader.files[0].size = modelView.size;

            this.$refs.uploader.uploader.fileList[0].fileType = "image/png";
            this.$refs.uploader.uploader.files[0].fileType = "image/png";
            this.$refs.uploader.uploader.fileList[0].name =
              this.$refs.uploader.uploader.fileList[0].name
                .split(/(.*)\.[^.]+/)
                .join("") + ".png";
            this.$refs.uploader.uploader.files[0].name =
              this.$refs.uploader.uploader.fileList[0].name
                .split(/(.*)\.[^.]+/)
                .join("") + ".png";
            this.$refs.uploader.uploader.fileList[0].relativePath =
              this.$refs.uploader.uploader.fileList[0].relativePath
                .split(/(.*)\.[^.]+/)
                .join("") + ".png";
            this.$refs.uploader.uploader.files[0].relativePath =
              this.$refs.uploader.uploader.fileList[0].relativePath
                .split(/(.*)\.[^.]+/)
                .join("") + ".png";
            this.$refs.uploader.uploader.fileList[0].uniqueIdentifier =
              modelView.size +
              "-" +
              this.$refs.uploader.uploader.fileList[0].name;
            this.$refs.uploader.uploader.fileList[0].chunks[0].endByte =
              modelView.size;

            this.previewImgURL = data;
            this.ruleForm.select_or_not = "1";
            this.uploadInfo.file_size =
              this.$refs.uploader.uploader.fileList[0].size;
            this.selectFileOrNot = true;
            this.selectFileShow = false;
            this.cropperViews = false;

            this.fileUpload();
          }
        });
      }
    },
    fileAddImg(file, fileList) {
      let file_type = file.fileType.toLocaleLowerCase();

      if (!this.imageType.includes(file_type)) {
        this.$message.warning("只允许上传 bmp/jpg/jpeg/png 格式图片");
      } else {
        this.imgOption.img = window.URL.createObjectURL(file.file);
        this.cropperViews = true;
      }
    },
    //过滤文件格式
    fileSubmit(files, fileList, event) {
      for (let i = 0; i < fileList.length; i++) {
        let file_type = fileList[i].fileType.toLocaleLowerCase();
        if (!this.imageType.includes(file_type)) {
          this.$message.warning("只允许上传图片格式的文件");
          this.$refs.uploader.uploader.removeFile(fileList[i]);
        } else if (fileList[i].size > 10240000) {
          this.$message.warning("只允许上传10M以内的文件");
          this.$refs.uploader.uploader.removeFile(fileList[i]);
        } else {
          if (this.$refs.uploader.uploader.fileList.length > 1) {
            //删除第一张图片
            this.$refs.uploader.uploader.removeFile(
              this.$refs.uploader.uploader.fileList[0]
            );
          }
          this.previewImgURL = window.URL.createObjectURL(fileList[i].file);
          this.ruleForm.select_or_not = "1";
          this.uploadInfo.file_size = fileList[i].size;
          this.selectFileOrNot = true;
          this.selectFileShow = false;
        }
      }
    },
    fileRemoved(file) {
      this.previewImgURL = "";
      this.ruleForm.select_or_not = "";
      this.selectFileOrNot = false;
      this.selectFileShow = true;
    },
    fileUpload() {
      this.$refs.uploader.uploader.upload();
    },
    //表单验证
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // if(this.selectFileOrNot){
          // 	this.fileUpload();
          // }else{
          this.saveLive();
          // }
        } else {
          return false;
        }
      });
    },
    cancel() {
      this.$router.go(-1);
    },
    // 判断选择的直播设备是否为拉流设备
    getCurrentRecorderType() {
      let type = this.recorderData.find(
        (r) => r.id === this.ruleForm.recorder_id
      ).type;
      // type:4 拉流设备
      if (type === 4) {
        this.currentRecorderType = type;
        this.ruleForm.is_record = 0;
        return;
      }
      this.currentRecorderType = null;
    },
  },
  destroyed(to, from, next) {
    this.$message.closeAll();
  },
};
</script>
<style lang="scss">
.croppering {
  .is-ai {
    overflow: hidden;
    margin-bottom: 40px;

    > .el-form-item {
      display: inline-block;
      vertical-align: top;
      &:nth-of-type(2) {
        float: right;
      }
    }
  }

  .cropper {
    height: 500px;

    > div {
      height: 100%;
    }
  }

  .dialog-footer {
    padding: 35px 0;
    text-align: center;

    button {
      padding: 10px 30px;
    }
  }

  .vue-cropper {
    position: relative;
    width: 100%;
    height: 500px;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    direction: ltr;
    touch-action: none;
    text-align: left;
    background-image: url("");
  }

  .cropper-box,
  .cropper-box-canvas,
  .cropper-drag-box,
  .cropper-crop-box,
  .cropper-face {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    user-select: none;
  }

  .cropper-box-canvas img {
    position: relative;
    text-align: left;
    user-select: none;
    transform: none;
    max-width: none;
    max-height: none;
  }

  .cropper-box {
    overflow: hidden;
  }

  .cropper-move {
    cursor: move;
  }

  .cropper-crop {
    cursor: crosshair;
  }

  .cropper-modal {
    background: rgba(0, 0, 0, 0.5);
  }

  .cropper-view-box {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    outline: 1px solid #39f;
    outline-color: rgba(51, 153, 255, 0.75);
    user-select: none;
  }

  .cropper-view-box img {
    user-select: none;
    text-align: left;
    max-width: none;
    max-height: none;
  }

  .cropper-face {
    top: 0;
    left: 0;
    background-color: #fff;
    opacity: 0.1;
  }

  .crop-info {
    position: absolute;
    left: 0px;
    min-width: 65px;
    text-align: center;
    color: white;
    line-height: 20px;
    background-color: rgba(0, 0, 0, 0.8);
    font-size: 12px;
  }

  .crop-line {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.1;
  }

  .line-w {
    top: -3px;
    left: 0;
    height: 5px;
    cursor: n-resize;
  }

  .line-a {
    top: 0;
    left: -3px;
    width: 5px;
    cursor: w-resize;
  }

  .line-s {
    bottom: -3px;
    left: 0;
    height: 5px;
    cursor: s-resize;
  }

  .line-d {
    top: 0;
    right: -3px;
    width: 5px;
    cursor: e-resize;
  }

  .crop-point {
    position: absolute;
    width: 8px;
    height: 8px;
    opacity: 0.75;
    background-color: #39f;
    border-radius: 100%;
  }

  .point1 {
    top: -4px;
    left: -4px;
    cursor: nw-resize;
  }

  .point2 {
    top: -5px;
    left: 50%;
    margin-left: -3px;
    cursor: n-resize;
  }

  .point3 {
    top: -4px;
    right: -4px;
    cursor: ne-resize;
  }

  .point4 {
    top: 50%;
    left: -4px;
    margin-top: -3px;
    cursor: w-resize;
  }

  .point5 {
    top: 50%;
    right: -4px;
    margin-top: -3px;
    cursor: e-resize;
  }

  .point6 {
    bottom: -5px;
    left: -4px;
    cursor: sw-resize;
  }

  .point7 {
    bottom: -5px;
    left: 50%;
    margin-left: -3px;
    cursor: s-resize;
  }

  .point8 {
    bottom: -5px;
    right: -4px;
    cursor: se-resize;
  }
}

.live-broadcast {
  max-width: 1000px;

  .jurisdiction {
    > label {
      &:after {
        display: block;
        content: "(谁不能查看)";
        font-size: 12px;
        color: #999;
        line-height: 16px;
      }
    }
  }

  .setting-password {
    .el-input {
      width: 300px;
    }
  }

  .el-form {
    // padding-top: 30px;
  }
  .publishFrom_b {
    text-align: center;

    > i {
      font-size: 60px;
      color: #9cd1ff;
      margin-top: 10px;
    }

    i:before {
      content: "\E7C3";
    }

    > p {
      margin: 0;
      line-height: 20px;
      font-size: 12px;
    }
  }

  .numberWord {
    font-size: 12px;
    > i {
      font-style: normal;
    }
  }

  .el-tree-node__expand-icon {
    display: block !important;
  }

  .el-tree-node__content > .el-checkbox {
    margin-right: 8px;
  }

  .el-tree-node__children {
    padding-left: 18px !important;
  }

  .roleArray,
  .gradeArray {
    > .el-form-item__content {
      background: rgba(253, 253, 253, 1);
      border: 1px solid rgba(239, 239, 239, 1);
    }
    .el-scrollbar {
      .el-scrollbar__wrap {
        height: 80px;
        padding: 15px 40px 30px;
      }
      .el-checkbox-group {
        line-height: initial;
      }
      label {
        margin-top: 20px !important;
        line-height: 20px;
      }
    }
  }

  .allClass {
    .el-tree-node__content {
      height: 30px;
      line-height: 30px;
    }
  }

  .calssArray-wp {
    display: flex;
    flex-flow: row;
    border: 1px solid rgba(239, 239, 239, 1);
    height: 315px;
    .el-tree {
      width: 200px;
      height: 100%;
      overflow: hidden;
      overflow-y: auto;
      border-right: 1px solid rgba(239, 239, 239, 1);
      > .el-tree-node {
        .el-tree-node__content {
          padding-left: 0 !important;
        }
        > .el-tree-node__content {
          line-height: 36px;
          height: 36px;
          background: rgba(237, 237, 237, 1);
          border: 1px solid rgba(239, 239, 239, 1);
        }
      }
    }
    .calssArray-r {
      flex: 1;
      > h3 {
        height: 46px;
        line-height: 46px;
        margin: 0 10px;
        color: rgba(102, 102, 102, 1);
        border-bottom: 1px dashed #eee;
      }
      .el-scrollbar {
        height: calc(100% - 46px);
        li {
          margin: 0 10px;
          border-bottom: 1px dashed #eee;
          > h3 {
            font-size: 14px;
            line-height: 44px;
            padding-left: 10px;
          }
          span {
            display: inline-block;
            vertical-align: top;
            height: 20px;
            line-height: 20px;
            margin: 0 30px 0 15px;
            i {
              margin-left: 5px;
              cursor: pointer;
              &:hover {
                color: #f56c6c;
              }
            }
          }
        }
      }
    }
  }
}

.make_time {
  text-align: center;
  text-align-last: justify;
  > div {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    text-align-last: initial;
    &:nth-of-type(1) {
      width: 220px;
    }
    &:nth-of-type(2) {
      width: 200px;
      .el-input__prefix {
        left: initial;
        right: 0;
        background: #409eff;
        color: #fff;
        width: 44px;
        font-size: 20px;
        // height: 40px;
        border-radius: 0 3px 3px 0;
      }
      .el-input__suffix {
        right: 48px;
      }
      .el-input__inner {
        padding-left: 12px;
      }
    }
  }
  .Livesection {
    width: 260px;
    .el-col-11 {
      width: 118px;
    }
    .el-col-2 {
      text-align: center;
    }
    .el-date-editor.el-input {
      width: 100% !important;
    }
  }
}
.dateTime {
  .el-input__icon {
    color: #fff;
    font-size: 18px;
  }
  .el-input__suffix {
    right: 48px;
    > i {
      width: 22px;
      color: #999;
    }
  }
}

.liveSelect {
  > div {
    width: 110px;
  }
}

.publishFrom_ {
  width: 240px;
  height: 135px;
  border: 1px solid #ddd;
  position: relative;

  .avatar-uploader {
    height: 100%;
  }
  .el-upload--text {
    width: 100%;
    height: 100%;
  }
  .uploader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
  }
  .uploader-list {
    top: 45px;
  }
  .uploader-file {
    height: initial;
    line-height: initial;
    border: 0;
    // background:$bg_5;
    border-radius: 100px;
  }
  .uploader-file-progress {
    background: #338efc;
  }
  .uploader-file-info {
    > div {
      display: inline-block;
      line-height: 20px;
      vertical-align: middle;
      width: auto;
      margin-right: 20px;
      text-align: center;
      float: initial;
      color: #666;
    }
    .uploader-file-name {
      display: block;
      width: 100%;
      margin: 0;
      margin-bottom: 15px;
      display: none;
    }
    span {
      margin-top: 0;
      &:last-of-type {
        margin: 0;
      }
    }
    .uploader-file-actions {
      margin: 0;
    }
  }
  .uploader-file-icon {
    margin: 0;
    margin-right: 10px;
  }
  .uploader-file-status,
  .uploader-file-size,
  .uploader-file-name {
    text-indent: 0;
  }
  .uploader-btn {
    display: block;
    position: relative;
    padding: 0;
    font-size: 100%;
    border: 0;
    background: none;
    height: 100%;
    line-height: 134px;
    text-align: center;
  }

  .uploader-close-box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    .el-upload-list__item-status-label {
      display: block;
      position: absolute;
      right: -17px;
      top: -7px;
      width: 46px;
      height: 26px;
      background: #13ce66;
      text-align: center;
      transform: rotate(45deg);
      box-shadow: 0 1px 1px #ccc;

      .el-icon-check {
        font-size: 12px;
        margin-top: 12px;
        color: #fff;
        transform: rotate(-45deg);
        font-family: "element-icons" !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        vertical-align: baseline;
        display: inline-block;
        -webkit-font-smoothing: antialiased;
      }

      .el-icon-check:before {
        content: "\E6DA";
      }

      .el-icon-close {
        display: none;
      }
    }
  }

  .uploader-close-box:hover {
    .el-upload-list__item-status-label {
      top: -4px;
      right: -15px;
      background: #f56c6c;
      box-shadow: none;
      cursor: pointer;

      .el-icon-check {
        display: none;
      }

      .el-icon-close {
        position: absolute;
        transform: rotate(-45deg);
        top: 10px;
        color: #fff;
        right: 14px;
        font-family: "element-icons" !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        vertical-align: baseline;
        display: inline-block;
        -webkit-font-smoothing: antialiased;
      }

      .el-icon-close:before {
        content: "\E6DB";
      }
    }
  }
}

.numberWord {
  position: absolute;
  bottom: 5px;
  right: 15px;
  color: #999999;
  line-height: 19px;
}

.publishFrom_seleck {
  text-align: center;
  text-align-last: justify;
  > .el-form-item {
    text-align: left;
    text-align-last: initial;
    display: inline-block;
    vertical-align: top;
  }
}
.publishFrom_b {
  > p {
    color: #999;
  }
}

.live-broadcast {
  .uploader-img {
    width: 240px;
    height: 135px;
    border: 1px solid #ddd;
    position: relative;
    overflow: hidden;
  }

  .publishFrom_b {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}
</style>
